import * as React from 'react';
import {Button, Form} from 'antd';
import dataFormTab from '../basic/item';
import {SearchHeaderProps} from '../../interface/component'
import './style.less';

const FormItem = Form.Item;

class SearchWrapper extends React.PureComponent<SearchHeaderProps, any> {

    public FormItems:any[] = [];

    public handleSubmit = (e: any) => {
        const {form: {validateFields}, onHandleSubmit} = this.props;
        e.preventDefault();
        validateFields(async (err: any, values: any) => {
            if (!err) {
                await onHandleSubmit(values);
            }
        });
    }

    public componentWillMount(){
        const {form, dataForm} = this.props;

        const Comps = dataFormTab(dataForm);

        Object.keys(Comps).forEach((ItemName: any) => {
            const ItemComp = Comps[ItemName];

            this.FormItems.push(<ItemComp form={form} key={ItemName}/>)
        })

    }

    public render() {

        return (
            <div className={`main-search-form ${this.props.className?this.props.className:''}`}>
                <Form layout="inline" onSubmit={this.handleSubmit}>
                    {this.FormItems}
                    <FormItem>
                        <Button style={{width: 100}} type="primary" htmlType="submit">搜搜</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}


export default Form.create()(SearchWrapper);